import { Link, useNavigate } from 'react-router-dom';
import { Menu, Dropdown, Button } from 'antd';
import type { ItemType } from 'antd/lib/menu/hooks/useItems';
import { observer } from 'mobx-react';
import loginUser from '@/store/loginUser';
import './index.less';

function AvatarComponent() {
  const navigator = useNavigate();

  const { avatar } = loginUser;

  const handleLogout = async () => {
    await loginUser.logout();
    navigator('/login');
  };

  const items: ItemType[] = [
    {key: 0, label: <Link to='/syt/dashboard'>返回首页</Link>},
    {key: 1, label: <div onClick={handleLogout}>退出登录</div>},
  ]

  return (
    <>
      <Dropdown overlay={<Menu items={items} />} trigger={['click']}>
        <Button className='layout-dropdown-link' type='link'>
          <span className="name">{loginUser.name}</span>
          <img className='layout-avatar' src={avatar} alt='avatar' />
        </Button>
      </Dropdown>
    </>
  );
}

export default observer(AvatarComponent);
